<template>
	<app-layout>
		<view class="app-search">
			<app-search-for></app-search-for>
		</view>
		<view class="menu">
			<!-- <view class="item">
				<view class="name">类别</view>
				<view class="right">
					<scroll-view scroll-x class="scroll">
						<view :class="cat_id==item.id?'active':''" v-for="(item,index) in menu1" :key="index"
							@click="setId(item.id,0,index)">{{item.name}}</view>
					</scroll-view>
					<image class="icon" src="/static/image/icon/arrow-right.png" mode="widthFix"></image>
				</view>
			</view> -->
			<view class="item">
				<view class="name">规格</view>
				<view class="right">
					<scroll-view scroll-x class="scroll">
						<view :class="cat_id==item.id?'active':''" v-for="(item,index) in menu2" :key="index"
							@click="setId(item.id,1,index,item.name)">
							{{item.name}}
						</view>
					</scroll-view>
					<image class="icon" src="/static/image/icon/arrow-right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item">
				<view class="name">系列</view>
				<view class="right">
					<scroll-view scroll-x class="scroll">
						<view :class="cat_id==item.id?'active':''" v-for="(item,index) in menu3" :key="index"
							@click="setId(item.id,2,index,item.name)">
							{{item.name}}
						</view>
					</scroll-view>
					<image class="icon" src="/static/image/icon/arrow-right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="lists">
			<block v-if="list.length>0">
				<view class="item title" v-for="(item, i) in list" :key="item.id">
					<text class="sub">{{ item.name }}</text>
					<text class="name">{{ item.subtitle }}</text>
					<view class="itemBody">
						<block v-if="item.child.length>0">
							<view class="ite" v-if="ite[0]" v-for="(ite, inde) in item.child" :key="inde"
								@click="navTo2(i,inde)">
								<view class="img">
									<image :src="ite[0].cover_pic" mode="aspectFit"></image>
								</view>
								<view class="names">{{ ite[0].name }}</view>
							</view>
						</block>
						<view class="none" v-else>
							<image src="/static/image/icon/empty.png" mode="widthFix"></image>
							<text>暂无列表</text>
						</view>
					</view>
				</view>
			</block>
			<view class="none" v-else>
				<image src="/static/image/icon/empty.png" mode="widthFix"></image>
				<text>暂无列表</text>
			</view>
		</view>
		<!-- 	<block v-else>
			<view class="title" v-if="list.length>0">
				<text class="sub">{{sub}}</text>
				<text class="name">{{name}}</text>
				<view class="list">
					<view class="item" v-for="(item, index) in list" :key="index" @click="navTo(item.page_url)">
						<view class="img">
							<image :src="item.cover_pic" mode="aspectFill"></image>
						</view>
						<text class="u-line-3">{{ item.name }}</text>
					</view>
				</view>
			</view>
			<view class="none" v-else>
				<image src="/static/image/icon/empty.png" mode="widthFix"></image>
				<text>暂无列表</text>
			</view>
		</block> -->
	</app-layout>
</template>

<script>
	import appSearchFor from '../../components/page-component/app-search-for/app-search-for.vue';
	import page from '../../store/modules/page';
	export default {
		data() {
			return {
				list: [],
				cat_id: 0,
				// menu1: [],
				menu2: [],
				menu3: [],
				lists: [],
				page: 1,
				index: 0,
				cur: 0,
				sub: "",
				name: ""
			}
		},
		components: {
			appSearchFor
		},
		methods: {
			navTo2(index, i) {
				// console.log(this.list[index].child[i]);
				// return
				uni.navigateTo({
					url: '/pages/goods/goods?id=' + this.list[index].child[i][1].good_id
				})
			},
			setId(id, cur, index, name) {
				this.cat_id = id
				this.cur = cur
				this.index = index
				this.name = name
				this.getList()
				// this.sub = this[`menu${cur+1}`][index].name
				// this.name = this[`menu${cur+1}`][index].subtitle
				// if (cur == 1) return this.getLists()
				// this.requestCatList()
			},
			async getList() {
				const res = await this.$request({
					url: this.$api.default.content,
					method: 'get',
					data: {
						proname: this.name
					}
				})
				if (res.code == 0) {
					this.list = res.data.newArr? res.data.newArr : res.data.list.length > 0 ? res.data.list :
						res.data.table
					console.log(this.list);
				}
			},
			navTo(url) {
				console.log(url);
				uni.navigateTo({
					url
				})
			},
			async getMenu() {
				const res = await this.$request({
					url: this.$api.default.cat_list
				})
				if (res.code == 0) {
					let menu2 = []
					let menu3 = []
					let lists = []
					// this.menu1 = res.data.list
					res.data.list.map(item => menu2.push(...item.child))
					res.data.list.map(item => item.child.map(e => menu3.push(...e.child)))
					this.menu2 = menu2
					this.menu3 = menu3
					let i1 = res.data.list.findIndex(item => item.id == this.cat_id)
					let i2 = menu2.findIndex(item => item.id == this.cat_id)
					let i3 = menu3.findIndex(item => item.id == this.cat_id)
					if (i1 > -1) {
						this.name = res.data.list[i1].subtitle
						this.sub = res.data.list[i1].name
					} else if (i2 > -1) {
						this.index = i2
					} else if (i3 > -1) {
						this.index = i3
						this.name = this.menu3[i3].subtitle
						this.sub = this.menu3[i3].name
					}
					for (let i = 0; i < menu2.length; i++) {
						for (let j = i + 1; j < menu2.length; j++) {
							if (menu2[i].name == menu2[j].name) {
								menu2[j].child.push(...menu2[i].child);
								j = ++i;
							}
						}
						lists.push(menu2[i]);
					}
					if (this.cur == 1) {
						this.getLists()
					} else {
						this.requestCatList()
					}
				}
			},
			// 求情商品列表
			async requestCatList() {
				const res = await this.$request({
					url: this.$api.default.goods_list,
					method: 'get',
					data: {
						page: 1,
						cat_id: 105
					}
				});
				if (res.code === 0) {
					this.list = this.list.concat(res.data.list)
					this.page++
				}
			},
			async table() {
				const res = await this.$request({
					url: this.$api.default.table,
					method: 'get',
				});
				if (res.code === 0) {
					this.menu2 = []
					this.menu3 = []
					for (let i = 0; i < res.data.list2.length; i++) {
						for (let j = i + 1; j < res.data.list2.length; j++) {
							if (res.data.list2[i].name == res.data.list2[j].name) {
								// menu2.push(...res.data.list2[i].child);
								// console.log(list[i],list[j],1);
								j = ++i;
							}
						}
						this.menu2.push(res.data.list2[i]);
					}
					for (let i = 0; i < res.data.list3.length; i++) {
						for (let j = i + 1; j < res.data.list3.length; j++) {
							if (res.data.list3[i].name == res.data.list3[j].name) {
								// res.data.list3[j].child.push(...res.data.list3[i].child);
								// console.log(list[i],list[j],1);
								j = ++i;
							}
						}
						this.menu3.push(res.data.list3[i]);
					}
					let i1 = this.menu2.findIndex(item => item.name == this.name)
					let i2 = this.menu3.findIndex(item => item.name == this.name)
					// console.log(res.data.list2[i1], i2);
					this.index = i1 > -1 ? 1 : 2
					this.cat_id = i1 > -1 ? this.menu2[i1].id : this.menu3[i2].id
					this.getList()
				}
			}
		},
		onLoad(options) {
			this.name = options.name
			this.table()
		},
	}
</script>

<style lang="scss" scoped>
	.title {
		>text {
			display: block;
			line-height: 1.5em;
			text-align: center;
		}

		>.sub {
			color: #737373;
			font-family: '黑体';
			letter-spacing: 4px;
			font-size: 24rpx;
		}

		>.name {
			font-size: 28rpx;
			color: #1a1915;
			font-family: '黑体';
			letter-spacing: 2px;
			font-weight: bold;
		}
	}

	.img {
		width: 100%;
		position: relative;
		background-color: #f6f6f6;
		padding-bottom: 100%;

		image {
			top: 50%;
			transform: translateY(-50%);
			position: absolute;
			width: 100%;
			max-width: 100%;
			height: 100%;
			height: 100%;
		}
	}

	.none {
		width: 100%;
		text-align: center;
		margin-top: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999;

		image {
			margin: 0 auto;
			width: 450rpx;
			margin-bottom: 20rpx;
			display: block;
		}

	}

	.lists {
		padding: 24rpx 24rpx 0 24rpx;

		.item {
			margin: 30upx 0;

			.itemBody {
				display: flex;
				margin-top: 20upx;
				justify-content: space-between;

				flex-wrap: wrap;

				.ite {
					border-radius: 16upx;
					overflow: hidden;
					margin: 20upx 0;
					width: 49%;
					background-color: #fff;
					box-shadow: #eee 0 0 6px 4px;



					.names {
						font-size: 0.8em;
						color: #737373;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-family: '黑体';
						padding: 10upx;
					}
				}
			}
		}
	}

	.list {
		padding: 20upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			margin-bottom: 20rpx;
			width: calc(50% - 10rpx);
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			box-shadow: rgba(0, 0, 0, 0.05) 0 0 5px 3px;

			text {
				font-size: 0.8em;
				color: #737373;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-family: '黑体';
				padding: 10upx;
			}
		}
	}

	.menu {
		padding: 20rpx;

		.item {
			margin-bottom: 20rpx;
		}

		.name {
			width: 2em;
			font-weight: bold;
			font-size: 30rpx;
			margin-right: 20rpx;
		}

		.right {
			width: 1px;

			.scroll {
				width: 1px;
				font-size: 26rpx;
				color: #555;
				white-space: nowrap;

				.active {
					background-color: #ccc;
				}

				view {
					display: inline-block;
					margin: 0 5rpx;
					padding: 8rpx 10rpx;
				}
			}

			.icon {
				width: 15rpx;
				margin-left: 20rpx;
			}

		}

		.item,
		.right,
		.scroll {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>